<template>
	<view>
		<u-navbar :border-bottom="false" title-color="#333" title-bold :title="type==1?'发布协作任务':'发布需求'" title-size="36"></u-navbar>
		<view class="d-id">
			<view class="d-item flex_sb flex border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					协作类型
				</view>
				<view class="flex" @click="wcshow=true">
					<view class="u-m-r-4 item-vl">
						{{ajtype?ajtype:'请选择'}}
					</view>
					<u-icon name="arrow-right" color="#333" size="24"></u-icon>
				</view>
			</view>
			<view class="d-item flex_sb flex border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					协作领域
				</view>
				<view class="flex" @click="wcshow2=true">
					<view class="u-m-r-4 item-vl">
						{{ajtype2?ajtype2:'请选择'}}
					</view>
					<u-icon name="arrow-right" color="#333" size="24"></u-icon>
				</view>
			</view>
			<!-- <view class="d-item flex_sb flex border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					涉案金额
				</view>
				<view class="flex" @click="jeshow=true">
					<view class="u-m-r-4 item-vl">
						{{jine?jine:'请选择'}}
					</view>
					<u-icon name="arrow-right" color="#333" size="24"></u-icon>
				</view>
			</view> -->
			<!-- <view class="d-item flex border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					联系方式
				</view>
				<u-input v-model="phone" />
			</view> -->
			<view class="d-item flex border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					预算金额（元）
				</view>
				<u-input type="number" v-model="price" />
			</view>
			<view class="d-item flex flex_sb border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					协作地区
				</view>
				<view class="flex" @click="showsr1=true">
					<view class="u-m-r-4 item-vl">
						{{address?address:'请选择'}}
					</view>
					
					<u-icon name="arrow-right" color="#333" size="28"></u-icon>
				</view>
			</view>
			<view class=" u-p-t-24">
				<view class="font_weight u-p-b-16">
					详细需求
				</view>
				<view class="textarea-d">
					<u-input maxlength="0" v-model="info" type="textarea" height="280"
						placeholder="请输入案例内容，支持图文。" />
				</view>
				<view class="u-m-t-10">
					<u-upload width="186" height="186" max-count="6" :form-data="formData" :max-size="1 * 1024 * 1024"
						:deletable="false" :action="action" :file-list="fileList" @on-success="onSuccess"></u-upload>
				</view>
			</view>
			
			<view class="d-item flex_sb flex border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					联系人
				</view>
				<u-input v-model="username" />
			</view>
			<view class="d-item flex_sb flex border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					联系电话
				</view>
				<u-input type="number" v-model="phone" />
			</view>
		</view>
		<view class="" style="width: 100%;height: 170rpx;"></view>
		<view class="btn-bo">
			<button class="btn_login_btn" @click="$u.throttle(submit, 2000)">
				立即发布
			</button>
		</view>
		
		
		<u-picker mode="selector" confirm-color="#20C064" :range="selector" v-model="wcshow" range-key="name"
			@confirm="showconfirm"></u-picker>
		<u-picker mode="selector" confirm-color="#20C064" :range="selector2" v-model="wcshow2" range-key="name"
			@confirm="showconfirm2"></u-picker>
		<u-picker mode="selector" confirm-color="#20C064" :range="jineList" v-model="jeshow" range-key="name"
			@confirm="jeshowconfirm"></u-picker>
		<!-- <u-picker :params="params" mode="region" v-model="showsr1" @confirm="regionconfirm1"></u-picker>-->
		 <u-select v-model="showsr1" mode="single-column" :list="addressList" @confirm="regionconfirm1" value-name="id" label-name="name"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList:[],
				params: {
					province: true,
					city: true,
					area: true
				},
				wcshow: false,
				jeshow:false,
				name: '',
				
				list: [],
				type_id: '',
				info: '',
				// 演示地址，请勿直接使用
				action: '',
				fileList: [],
				gallery: [],
				formData: {
					token: uni.getStorageSync("token")
				},
				address: '',
				showsr1: false,
				selector:[],
				ajtype:'',
				
				selector2:[],
				wcshow2:false,
				ajtype2:'',
				serve_id:'',
				
				jineList:[],
				jine:'',
				
				
				task_id:'',
				price_dur_min:'',
				price_dur_max:'',
				phone: '',
				username:'',
				price:'',
				province:'',
				type:'2',
				
				lsdetail:[]
				
			}
		},
		onLoad(e) {
			this.type = e.type
			this.action = this.$config.uploadUrl
			console.log(this.action)
			this.fuwuList()
			this.getjineList()
			this.getaddrerss()
			// this.getInfo()
		},
		methods: {
			
			
			
			getaddrerss(){
				this.$api({
					url: '/getChinaArea',
					method: 'get',
				}).then(res => {
					if (res.code == 1) {
						this.addressList = res.data
					}
				})
			},
			fuwuList(){
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type:3 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.selector = res.data
					}
				})
				
				
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type:1 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.selector2 = res.data
					}
				})
			},
			getjineList(){
				this.$api({
					url: '/case_price_range',
					method: 'get',
					
				}).then(res => {
					this.jineList = res
				})
			},
			showconfirm(e) {
				this.ajtype = this.selector[e].name
				this.serve_id = this.selector[e].id
				
			},
			showconfirm2(e){
				this.ajtype2 = this.selector2[e].name
				this.task_id = this.selector2[e].id
			},
			jeshowconfirm(e){
				this.jine = this.jineList[e].name
				this.price_dur_min = this.jineList[e].min
				this.price_dur_max = this.jineList[e].max
			},
			back() {
				uni.navigateBack()
			},
			onSuccess(data, index, lists, name) {
				console.log(data)
				this.gallery.push(data.data.path)
			},
			regionconfirm1(e) {
				// this.address =  e.province.label + e.city.label + e.area.label
				// this.province = e.area.value
				this.address = e[0].label
				this.province = e[0].value
				console.log(e)
			},
			submit() {
				if (!this.serve_id) {
					uni.showToast({
						title: "请选择协作类型",
						icon: "none"
					});
					return
				}
				if (!this.task_id) {
					uni.showToast({
						title: "请选择协作领域",
						icon: "none"
					});
					return
				}
				// if (!this.jine) {
				// 	uni.showToast({
				// 		title: "请选择涉案金额",
				// 		icon: "none"
				// 	});
				// 	return
				// }
				
				if (!this.price) {
					uni.showToast({
						title: "请输入预算金额",
						icon: "none"
					});
					return
				}
				if (!this.province) {
					uni.showToast({
						title: "请选择协作地区",
						icon: "none"
					});
					return
				}
				if (!this.username) {
					uni.showToast({
						title: "请输入联系人",
						icon: "none"
					});
					return
				}
				if (!this.phone) {
					uni.showToast({
						title: "请输入联系方式",
						icon: "none"
					});
					return
				}
				this.$api({
					url: '/lawyer/apply',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						task_id:this.task_id,
						// price_dur_min:this.price_dur_min,
						// price_dur_max:this.price_dur_max,
						phone: this.phone,
						price:this.price,
						province:this.province,
						type:this.type,
						info:this.info,
						username:this.username,
						gallery:this.gallery.toString()
					},
				}).then(res => {
					if (res.code == 1) {
						let that = this
						uni.requestPayment({
							provider: "wxpay",
							appid: res.data.pay_info.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							timeStamp: res.data.pay_info.timeStamp, // 时间戳（单位：秒）
							paySign: res.data.pay_info.paySign, //签名
							nonceStr: res.data.pay_info.nonceStr, // 随机字符串
							package: res.data.pay_info.prepay_id, // 固定值
							signType: res.data.pay_info.signType, // 签名算法，这里用的 MD5/RSA 签名
							success(res2) {
								if (res2.errMsg == "requestPayment:ok") {
									uni.showToast({
										title: "发布成功",
										icon: "none"
									});
									setTimeout(()=>{
										uni.navigateBack()
									},1000)
								}
							},
							fail(e) {
								console.log('支付失败支付失败支付失败', e)
								uni.showToast({
									title: "支付失败",
									icon: "none"
								});
							}
						})
						
						
						
						
						
					}
				})
			},
			getType() {
				this.$api({
					url: '/getGuestBookType',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						// "type": '0'   // 0用户咨询，1意见反馈
					},
				}).then(res => {
					if (res.code == 200) {
						this.list = []
						let lists = Object.values(res.data)
						let keys = Object.keys(res.data)

						for (let i in lists) {
							this.list.push({
								name: lists[i],
								checked: false,
								id: keys[i]
							})
						}


					}
				})
			},

			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.type_id = e.toString()
				console.log(e);
			},
		}
	}
</script>

<style scoped lang="scss">
	.popupmd {
		width: 554rpx;
		// height: 344rpx;
		background: linear-gradient(180deg, #FFECEA 0%, #FFFFFF 100%);
		padding: 68rpx 24rpx;


		.p-bd {
			font-size: 28rpx;
			line-height: 64rpx;
			text-align: center;

			.p-btn2 {
				width: 248rpx;
				height: 64rpx;
				background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				color: #FFFFFF;
			}
		}


	}

	.btn-bo {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		padding-top: 14rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;

		.btn_login_btn {
			width: 686rpx;
			height: 90rpx;
			background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			// margin-top: 116rpx;
			font-size: 36rpx;
			color: #fff;
			line-height: 90rpx;
			margin-left: 32rpx;
			text-align: center;
			font-weight: bold;
		}
	}

	.d-id {
		width: 702rpx;
		padding: 0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 24rpx auto;

		.d-item {
			height: 100rpx;

			.d-item-t {
				width: 240rpx;
			}
		}
	}

	.textarea-d {
		width: 640rpx;
		min-height: 280rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 24rpx;
	}
	.item-vl {
		font-size: 28rpx;
		color: #9695A3;
		width: 456rpx;
		text-align: right;
	}
</style>